<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header class="el-header">
      <div class="logo">
        <img src="../assets/logo.png" alt="" srcset="">
      </div>
      <div>
        <el-dropdown>
          <span class="el-dropdown-link" style="color:#fff;margin-right:15px">
            {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <a href="/myprofile"><el-dropdown-item>用户管理中心</el-dropdown-item></a>
            <a href="/user_edit"><el-dropdown-item>编辑</el-dropdown-item></a>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" @click="relogin">登出</el-button>
      </div>
      
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <!-- <el-aside :width="isCollapse?'64px':'200px'" class="aside"> -->
      <el-aside width="200px" class="aside">
        <!-- <div class="toggle-button" @click="togglecollapse">|||</div> -->
        <!-- 第一个导航栏 -->
        <el-menu
          @open="handleOpen"
          @close="handleClose"
          background-color="rgb(76, 95, 184)"
          text-color="#fff"
          active-text-color="rgb(64,158,255)" unique-opened :collapse='isCollapse' :router="true">
          <el-submenu :index="item.id + ''" v-for="(item,index) in menulist" :key="index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.authname }}</span>
            </template>
            <el-menu-item :index="'/' + item2.path" v-for="(item2,index2) in item.children" :key="index2">
              <!-- <i class="el-icon-pie-chart"></i> -->
              {{ item2.authname }}
            </el-menu-item>
          </el-submenu>
        </el-menu>

          
      </el-aside>
      <el-main class="el-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// import { } from './axios_api/api'
export default {
  name: 'home',
  props: {
  },
  data(){
    return {
      isCollapse: false,
      username: localStorage.getItem('username'),
      menulist: [
        {
          'id': 1,
          'authname': '总览',
          'path': null,
          'icon': 'el-icon-pie-chart',
          'children': [
            {
              'id': 11,
              'authname': '总览',
              'path': 'dashboard',
              'children': []
            },{
              'id': 12,
              'authname': '实时监控',
              'path': 'monitoring',
              'children': []
            }
          ]
        },
        {
          'id': 2,
          'authname': '运单',
          'path': null,
          'icon': 'el-icon-tickets',
          'children': [
            {
              'id': 21,
              'authname': '运单信息',
              'path': 'order_message',
              'children': []
            },{
              'id': 22,
              'authname': '运单列表',
              'path': 'order_list',
              'children': []
            },{
              'id': 23,
              'authname': '添加运单',
              'path': 'add_order',
              'children': []
            },{
              'id': 24,
              'authname': '客户信息',
              'path': 'customer_list',
              'children': []
            },{
              'id': 25,
              'authname': '添加客户',
              'path': 'add_customer',
              'children': []
            },{
              'id': 26,
              'authname': '添加公司',
              'path': 'add_company',
              'children': []
            }
          ]
        },
        {
          'id': 3,
          'authname': '设备',
          'path': null,
          'icon': 'el-icon-postcard',
          'children': [
            {
              'id': 31,
              'authname': '标签信息',
              'path': 'tag_list',
              'children': []
            },{
              'id': 32,
              'authname': '添加标签',
              'path': 'add_tag',
              'children': []
            },{
            //   'id': 33,
            //   'authname': '网关信息',
            //   'path': null,
            //   'children': []
            // },{
            //   'id': 34,
            //   'authname': '添加网关',
            //   'path': null,
            //   'children': []
            // },{
              'id': 35,
              'authname': '货物类型',
              'path': 'goods_type',
              'children': []
            },{
              'id': 36,
              'authname': '添加货物类型',
              'path': 'add_goods_type',
              'children': []
            }
            // ,{
            //   'id': 37,
            //   'authname': '查验校准报告',
            //   'path': null,
            //   'children': []
            // }
          ]
        },
        {
          'id': 4,
          'authname': '用户',
          'path': null,
          'icon': 'el-icon-user-solid',
          'children': [
            {
              'id': 41,
              'authname': '用户信息',
              'path': 'myprofile',
              'children': []
            },{
              'id': 42,
              'authname': '添加用户',
              'path': 'add_user',
              'children': []
            // },{
            //   'id': 43,
            //   'authname': '公司信息',
            //   'path': null,
            //   'children': []
            // },{
            //   'id': 44,
            //   'authname': '操作记录',
            //   'path': null,
            //   'children': []
            }
          ]
        },
        // {
        //   'id': 5,
        //   'authname': '曲线分析',
        //   'path': null,
        //   'icon': 'el-icon-s-marketing',
        //   'children': [
        //     {
        //       'id': 51,
        //       'authname': '多重曲线图',
        //       'path': null,
        //       'children': []
        //     },{
        //       'id': 52,
        //       'authname': '物流线路分析',
        //       'path': null,
        //       'children': []
        //     }
        //   ]
        // },
        // {
        //   'id': 6,
        //   'authname': '报警中心',
        //   'path': null,
        //   'icon': 'el-icon-message-solid',
        //   'children': [
        //     {
        //       'id': 61,
        //       'authname': '报警中心',
        //       'path': null,
        //       'children': []
        //     },{
        //       'id': 62,
        //       'authname': '报警设置',
        //       'path': null,
        //       'children': []
        //     }
        //   ]
        // },
        // {
        //   'id': 7,
        //   'authname': '设置',
        //   'path': null,
        //   'icon': 'el-icon-s-tools',
        //   'children': [
        //     {
        //       'id': 71,
        //       'authname': '参数设置',
        //       'path': null,
        //       'children': []
        //     }
        //   ]
        // }
      ]
    }
  },
  mounted(){
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 登出按钮
    relogin(){
      localStorage.clear();
      this.$router.push('/login')
    },
    // 菜单折叠
    togglecollapse(){
      this.isCollapse = !this.isCollapse

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

a {
    text-decoration: none;
    color: #fff
}
a:hover {
    text-decoration: none;
}
.home-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-header {
  background-color: rgb(76, 95, 184);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-aside {
  margin-top: 5px;
  background-color: rgb(76, 95, 184);
  
}
.el-menu {
    border-right: none;
  }
.el-main {
    background-color: rgb(240,242,244);
}
.toggle-button {
  background-color: rgb(62, 76, 140);
  font-size: 10px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.5em;
  cursor: pointer;
}
</style>
